<template>
  <!-- <Header /> -->

  <a-layout-content class="container-xxl px-0">
    <div class="cover">
      <a-layout-content class="ms-lg-auto col-lg-6 d-flex flex-column align-items-center align-items-lg-start">
        <div class="d-flex flex-column flex-lg-row align-items-center align-items-lg-start">
          <div class="app mb-2"><iLogoApp /></div>
          <div class="py-2 px-4">
            <h2 class="fs-3 mb-1 fw-bolder">区块灯塔</h2>
            <span class="fs-6">照亮数字之海</span>
          </div>
        </div>
        <div class="mt-3" v-show="env.isAndroid">
          <a-popover placement="rightTop">
            <template #content>
              <img src="../../assets/download_qrcode.jpg" />
            </template>
            <a-button type="primary" size="large" class="fs-5 d-flex align-items-center justify-content-center p-4">
              <iAndroid class="me-3" />
              <a href="###" target="_blank">下载安卓版</a>
            </a-button>
          </a-popover>
        </div>
        <div class="mt-3" v-show="env.isIOS">
          <a-popover placement="rightBottom">
            <template #content>
              <img src="../../assets/download_qrcode.jpg" />
            </template>
            <a-button type="primary" size="large" class="fs-5 d-flex align-items-center justify-content-center p-4">
              <iIos class="me-3" />
              <a href="###" target="_blank">下载iOS版</a>
            </a-button>
          </a-popover>
        </div>
      </a-layout-content>
    </div>
  </a-layout-content>
  <a-layout-content class="ant-layout-content pt-4 ticker container-xxl mb-5 mb-lg-0 d-flex justify-content-center flex-column flex-lg-row align-items-center">
    <div class="ticker_cover mx-0 col-10 col-lg-6 mb-lg-0 order-5 order-lg-0 mt-4"></div>
    <div class="d-flex flex-column col-10 col-lg-5 mx-lg-5 mt-5 align-items-center align-items-lg-start ps-lg-5">
      <h2 class="fs-1 mb-3 mb-lg-4">区块行情，时刻关注</h2>
      <span class="fs-6 pe-0 pe-lg-5 text-center text-lg-start">提供区块链个大币种的行情走势、盘口、逐笔交易等实时行情数据，及新闻资讯、公司公告、研究报告、行业研报、资料、行业资讯、资金流等重要信息</span>
    </div>
  </a-layout-content>
  <a-layout-content class="ant-layout-content ant-layout-content news container-xxl mb-lg-0 d-flex justify-content-between flex-column flex-lg-row align-items-center">
    <div class="d-flex flex-column col-10 col-lg-6 mx-lg-5 my-5 align-items-center align-items-lg-start">
      <h2 class="fs-1 mb-3 mb-lg-4">区块资讯，热点要闻</h2>
      <span class="fs-6 pe-0 pe-lg-5 text-center text-lg-start">科技在发展中，生活频率也在加快，早上的新闻到中午就是旧闻了，没有深度的新闻就是一张张小卡片，没有实锤的新闻只能叫做推测，在快餐时代，区块灯塔帮你获取真实有深度的新闻，掌握情势的大方向</span>
    </div>
    <div class="news_cover mx-0 col-10 col-lg-6 mb-lg-0"></div>
  </a-layout-content>

  <Footer slogan="区块灯塔 - 照亮你的数字之海" />
</template>

<script>
import Header from '@/components/layout/Header'
import Footer from '@/components/layout/Footer'
import { iLogoApp, iIos, iAndroid } from '@/components/icons'

export default {
  components: {
    Header,
    Footer,
    iLogoApp,
    iIos,
    iAndroid
  },
  computed: {
    env () {
      const nativeUserAgent = navigator.userAgent
      const isWindows = /Windows NT/.test(nativeUserAgent)
      // NOTE: Mac OS X 同样有效
      const isMacOS = /Macintosh/.test(nativeUserAgent)
      const isDesktop = isMacOS || isWindows

      return {
        isIOS: isDesktop || /iPhone|iPad|iPod/.test(nativeUserAgent),
        isAndroid: isDesktop || /Android/.test(nativeUserAgent)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.cover {
  background: url('../../assets/base/art/main_bg2.jpg') no-repeat center bottom;
  background-size: contain;
  background-color: #bcdbf0;
  padding: 78px 0;
  button {
    background-color: #2872FC;
    border-color: #2872FC;
    width: 230px;
    padding: 36px;
    a {
      color: #fff !important;
    }
    padding-right: 48px;
  }
}
.app {
  width: 90px;
  height: 90px;
  background: #FFFFFF;
  box-shadow: 0px 3.82006px 38.2006px rgba(192, 201, 223, 0.5);
  border-radius: 22px;
}
.ticker {
  max-width: 1150px;
  .ticker_cover {
    background: url('../../assets/img01.jpg') no-repeat center bottom;
    background-size: contain;
    min-height: 245px;
  }
}
.news {
  background-color: #2872FC;
  border-radius: 0px;
  overflow: hidden;
  h2 {
    color: #fff;
  }
  span {
    color: #F1F2F6;
  }
  .news_cover {
    background: url('../../assets/img02.png') no-repeat center top;
    background-size: contain;
    min-height: 500px;
    margin-bottom: -220px;
  }
}
.ant-popover-inner-content {
  padding: 0;
  img {
    width: 142px;
    height: 142px;
  }
}
@media (min-width: 992px) {
  .cover {
    padding: 190px 0 290px;
  }
  .ticker {
    .ticker_cover {
      min-height: 500px;
    }
  }
  .news {
    margin-bottom: 150px !important;
    margin-top: 200px !important;
    border-radius: 16px;
    .news_cover {
      position: absolute;
      left: 50%;
    }
  }
}
</style>